<template>
  <div id="app">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6" :lg="7" :xl="6">
        <h1>欢迎来到东大星问卷系统</h1>
        <el-image
          :src="require('@/assets/images/logo.png')"
          style="width: 175px; height: 210px; margin: 0"
        ></el-image>
      </el-col>
      <el-col :span="1">
        <el-divider direction="vertical"></el-divider>
      </el-col>

      <el-col :span="6">
        <el-form
          :model="PassResetForm"
          :rules="rules"
          ref="PassResetForm">

          <el-form-item prop="password1">
            <h2 style="margin-left: -220px;margin-bottom: 40px">
              <font size="6px">找回成功</font></h2>
            <el-input
              v-model="PassResetForm.password1" 
              style="width:320px;margin-left: 10px;" 
              show-password  placeholder="请输入新密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password2">
            <el-input
              v-model="PassResetForm.password2" 
              style="width:320px;margin-left: 10px;" 
              show-password  placeholder="请确认新密码"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" 
            style="width:323px;margin-left: 10px;" 
            @click="submitForm('PassResetForm')"
              >确认重置密码</el-button
            >
            <!-- <router-link to="/" margin-left="10px"
              ><el-button style="margin-left: 10px"> 返回登录页面 </el-button>
            </router-link> -->
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "PasswordReset",
  data() {
    return {
      PassResetForm: {
        password1: "",
        password2: "",
        name: (this.activePath = window.sessionStorage.getItem("name")),
      },
      rules: {
        password1: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
        password2: [
          { required: true, message: "请输入确认密码", trigger: "change" },
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.PassResetForm.password2 === "") {
                callback(new Error("请再次输入密码"));
              } else if (
                this.PassResetForm.password2 != this.PassResetForm.password1
              ) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) {
          return;
        }

        await this.$http
          .post("/passwdRecover", this.PassResetForm)
          .then((response) => {
            //访问后端
            const res = response;
            console.log(res);

            if (res == "666") {
              //访问成功
              this.$router.push("/login");
            } else {
              //访问失败
            }
          })
          .catch((error) => {
            // 【务必注意】这里的error输出的不是一个对象【error.response才是一个对象】
            // console.log(error);
            if (error.response) {
              // 请求已发出，但服务器响应的状态码不在 2xx 范围内
              console.log(error.response.data);
              console.log(error.response.status);
              console.log(error.response.headers);
            } else {
              // Something happened in setting up the request that triggered an Error
              console.log("请求未发出", error.message);
            }
          });
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.el-row {
  height: 100vh;
  display: flex;
  align-items: center;
}
.el-divider {
  height: 200px;
}
#app {
  background-image: url("@/assets/images/background.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;

  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
}
</style>